<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>登录</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />

  <link rel="stylesheet" href="./AmazeUI-2.4.2/assets/css/amazeui.css" />
  <link href="./css/dlstyle.css" rel="stylesheet" type="text/css">

  <!--引入vue和axios-->
  <script src="js/plugins/vue/dist/vue.js"></script>
  <script src="js/plugins/axios/dist/axios.js"></script>
  <!-- 全局的基础配置文件 -->
  <script src="js/plugins/common.js"></script>
</head>

<body>

<div class="login-boxtitle">
  <a href="home.html"><img alt="logo" src="./images/logobig.png" /></a>
</div>

<div class="login-banner" id="userLogin">
  <div class="login-main">
    <div class="login-banner-bg"><span></span><img src="./images/big.jpg" /></div>
    <div class="login-box">

      <h3 class="title">登录商城</h3>

      <div class="clear"></div>

      <div class="login-form">
        <form>
          <div class="user-name">
            <label for="user"><i class="am-icon-user"></i></label>
            <input v-model="userForm.phoneOrEmail" type="text" name="" id="user" placeholder="邮箱/手机/用户名">
          </div>
          <div class="user-pass">
            <label for="password"><i class="am-icon-lock"></i></label>
            <input v-model="userForm.password" type="password" name="" id="password" placeholder="请输入密码">
          </div>
        </form>
      </div>

      <div class="login-links">
        <label for="remember-me"><input id="remember-me" type="checkbox">记住密码</label>
        <a href="#" class="am-fr">忘记密码</a>
        <a href="register.html" class="zcnext am-fr am-btn-default">注册</a>
        <br />
      </div>
      <div class="am-cf">
        <input type="button" @click="loginButton" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm">
      </div>
      <div class="partner">
        <h3>合作账号</h3>
        <div class="am-btn-group">
          <li><a href="#"><i class="am-icon-qq am-icon-sm"></i><span>QQ登录</span></a></li>
          <li><a href="#"><i class="am-icon-weibo am-icon-sm"></i><span>微博登录</span> </a></li>
          <li><a href="https://open.weixin.qq.com/connect/qrconnect?appid=wxd853562a0548a7d0&redirect_uri=http://bugtracker.itsource.cn/callback.html&response_type=code&scope=snsapi_login&state=1#wechat_redirect">
            <i class="am-icon-weixin am-icon-sm"></i><span>微信登录</span> </a></li>
        </div>
      </div>

    </div>
  </div>
</div>

<div class="footer ">
  <div class="footer-hd ">
    <p>
      <a href="# ">恒望科技</a>
      <b>|</b>
      <a href="# ">商城首页</a>
      <b>|</b>
      <a href="# ">支付宝</a>
      <b>|</b>
      <a href="# ">物流</a>
    </p>
  </div>
  <div class="footer-bd ">
    <p>
      <a href="# ">关于恒望</a>
      <a href="# ">合作伙伴</a>
      <a href="# ">联系我们</a>
      <a href="# ">网站地图</a>
      <em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
    </p>
  </div>
</div>


<script type="text/javascript">
  new Vue({
    el: "#userLogin",
    data:{
      userForm:{
        phoneOrEmail:'18708146299',
        password:'1',
        type: 1  // 用户类型为1
      }
    },
    methods:{
      // 登录按钮绑定的函数
      loginButton(){
        // 发送请求
        this.$http.post("/login/account",this.userForm)
          .then(res=>{  // res: JsonResult:{success: true,msg:"",resultObj:map}  map中包含:key,user
            if(res.data.success){
              // 1. 把key（token）， user  存localStorage中
              // 获取token
              var token = res.data.resultObj.token;
              // 用户信息
              var logininfo = res.data.resultObj.logininfo;
              localStorage.setItem("token",token);
              // JSON.stringify(logininfo) 把json对象转成json字符串
              localStorage.setItem("logininfo",JSON.stringify(logininfo));

              // 2. 跳转首页
              location.href="index.html"
            } else{
              alert(res.data.msg);
            }

          }).catch(res=>{
          alert("网络异常，稍后重试");
        })
      }
    },
    mounted(){

    }
  })
</script>
</body>

</html>
